<template>
	<view class="record" :style="{ paddingTop: paddingHeight + 'px' }">
		<nav-bar title="所有数据"></nav-bar>
		<view class="header-bar" :style="{ paddingTop: paddingHeight + 'px' }">
			<view class="date_m" @click="showCalendar = true">
				<text>{{ currentSearchTime | dayFn }}</text>
				<u-icon name="arrow-down" color="#1F2434" size="13"></u-icon>
			</view>
			<view class="date_w">
				<view
					class="date-item"
					:class="{ active: weekDayIndex == index }"
					v-for="(item, index) in weekDayList"
					:key="index"
					@click="handleClickWeekDay(item, index)"
				>
					<view class="text">{{
						item.day == today ? '今' : item.weekDay
					}}</view>
					<view class="num">{{ item.day }}</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view
				class="cell"
				v-for="(item, index) in daysList"
				:key="index"
				@click="goDetails(item.time)"
			>
				<view class="c_l">
					<view class="icon"></view>
					<text class="num">{{ item.count }}次测量</text>
				</view>
				<view class="c_r">
					<text class="time">{{
                        item.time | dayFn
					}}</text>
					<text class="iconfont icon-arrow_rigth"></text>
				</view>
			</view>
		</view>
		<my-calendar
			:monthNum="24"
			:defaultDate="defaultDate"
			:maxDate="maxDate"
			@confirm="selectDate"
			:minDate="minDate"
			:show="showCalendar"
			color="#545DDE"
			closeOnClickOverlay
			@close="showCalendar = false"
		></my-calendar>
	</view>
</template>

<script>
import myCalendar from '@/components/myCalendar/myCalendar.vue'
import { findMeasureRecordByDay } from '@/api/index.js'
import { weekComputedfn } from '@/utils/utils.js'
const dayjs = require('@/utils/dayjs.min.js')
export default {
	components: {
		myCalendar
	},
	data() {
		return {
			paddingHeight: uni.getStorageSync('navbarHeight'),
			userId: uni.getStorageSync('userId'),
			weekDayList: [],
			today: '',
			weekDayIndex: '',
			daysList: [],
			currentSearchTime: '',
			defaultDate: [],
			maxDate: undefined,
			minDate: undefined,
			showCalendar: false // 日历控件显示
		}
	},
	filters: {
		dayFn(val) {
			return dayjs(val).format('YYYY年MM月DD日')
		}
	},
	onLoad() {
		this.weekDayList = weekComputedfn()
		this.today = dayjs().format('DD')
		this.weekDayList.forEach((item, index) => {
			if (this.today == item.day) {
				this.weekDayIndex = index
			}
		})
		this.maxDate = dayjs().format('YYYY-MM-DD')
		this.minDate = dayjs(dayjs(this.maxDate).subtract(365, 'day')).format(
			'YYYY-MM-DD'
		)
		this.currentSearchTime = dayjs().format('YYYY/MM')
		this.defaultDate[0] = this.maxDate
	},
	onShow() {
		this.fetchData()
	},
	methods: {
		handleClickWeekDay(item, index) {
			this.currentSearchTime = item.day2
			this.weekDayIndex = index
			this.defaultDate[0] = dayjs(item.day2).format('YYYY-MM-DD')
			this.fetchData()
		},
		async fetchData() {
			uni.showLoading({
				title: '加载中...'
			})
			let params = {
				page: 1,
				size: 32,
				time: this.defaultDate[0].replaceAll('/', '-'),
				userId: this.userId
			}
			try {
				const res = await findMeasureRecordByDay(params)
				uni.hideLoading()
				if (res.code == 200) {
					this.daysList = res.data.list
				}
			} catch (e) {
				//TODO handle the exception
				uni.hideLoading()
			}
		},
		// 选择日期
		selectDate(e) {
            let str = dayjs(e[0]).format('YYYY/M/DD')
            this.weekDayList.forEach((item, index) => {
                if (str == item.day2) {
		    		this.weekDayIndex = index
		    	}
		    })
			this.defaultDate[0] = e[0]
			this.currentChartsTime = dayjs(e[0]).format('YYYY/MM')
			this.fetchData()
			this.showCalendar = false
		},
		goDetails(date) {
			uni.navigateTo({
				url: `/pagesA/health/analyse/record/details?date=${date}`
			})
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #fafafa;
	min-height: 100%;
}
</style>
<style lang="scss" scoped>
.record {
	.header-bar {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		background-color: #fff;
		padding-bottom: 38rpx;
		.date_m {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #1f2434;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 30rpx auto;
		}
		.date_w {
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.active {
				border-radius: 64rpx;
				background-color: #1f2434;
				.text {
					color: #fff !important;
				}
				.num {
					background-color: #fff;
				}
			}
			.date-item {
				padding: 12rpx 6rpx 6rpx 6rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				text-align: center;
				.text {
					color: rgba(31, 36, 52, 0.8);
				}
				.num {
					width: 54rpx;
					height: 54rpx;
					margin-top: 10rpx;
					font-weight: 500;
					color: #1f2434;
					border-radius: 50%;
					background-color: #f3f4f7;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
	.container {
        margin-top: 276rpx;
		padding: 0 26rpx 48rpx;
		.cell {
			width: 100%;
			height: 100rpx;
			margin-bottom: 20rpx;
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			border-radius: 16rpx;
			color: #666666;

			.c_r,
			.c_l {
				font-size: 28rpx;
				display: flex;
				align-items: center;
				.icon {
					width: 38rpx;
					height: 38rpx;
					background: #23c89e;
					border-radius: 50%;
				}
				.num {
					padding-left: 16rpx;
                    font-size: 28rpx;
				}

				.time {
                    color: rgba(31,36,52,0.5);
					font-size: 26rpx;
				}

				.icon-arrow_rigth {
					color: rgba(31,36,52,0.5);
				}
			}
			.c_r {
				font-size: 26rpx;
			}
		}
	}
}
</style>
